<!DOCTYPE html>
<html lang="en">

<head>
    <title>TimelineJS Embed</title>
    <meta charset="utf-8">
    <meta name="description" content="TimelineJS Embed">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- FAVICONS -->
    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/manifest.json">
    <link rel="mask-icon" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <!-- 
      If we want to support loading different versions of timeline like we used to, 
      this isn't good enough. We used that to get the non-minimized version, for debugging,
      but now maybe sourcemaps are a better alternative?
    -->
    <script id='timeline-script-tag' type="text/javascript" src="../js/timeline.js"></script>
    <link rel="stylesheet" href="../css/timeline.css">
    <!-- Google Analytics should be handled by Timeline -->

    <base target="_blank">

    <!-- Style-->
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0px;
            margin: 0px;
        }
        
        #timeline-embed {
            height: 100%;
        }
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML elements-->
    <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>
    <!-- BEGIN Timeline Embed -->
    <div id="timeline-embed"></div>
    <!-- Override -->
    <script type="text/javascript">
        function ready(fn) {
            if (document.readyState != 'loading') {
                fn();
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }

        function setPageLanguage() {
            var lang = window.location.href.match(/&lang=([a-zA-Z]*?)&?/);

            if (lang) {
                document.getElementsByTagName('html')[0].setAttribute('lang', lang[1]);
            }

        }

        function computeEmbedPath() {
            var trim_point = window.location.href.indexOf('embed/index.html');
            if (trim_point > 0) {
                return window.location.href.substring(0, trim_point); // supports https access via https://s3.amazonaws.com/cdn.knightlab.com/libs/timeline/latest/embed/index.html
            }
            return "https://cdn.knightlab.com/libs/timeline3/latest/";
        }

        function addOembedTag() {
            // it's not clear that any tools execute this JS to get the URL, but maybe?
            var oembed_link = document.createElement('link');
            oembed_link['rel'] = 'alternate';
            oembed_link['type'] = 'application/json+oembed';
            oembed_link['href'] = 'https://oembed.knightlab.com/timeline/?url=' + encodeURIComponent(window.location.href);
            document.head.appendChild(oembed_link);
        }

        function createEmbedDiv(containerId, width, height) {

            if (typeof(width) != 'string' && typeof(width) != 'number') {
                width = '100%'
            }

            if (typeof(height) != 'string' && typeof(height) != 'number') {
                height = '100%'
            }

            // default containerId would be 'timeline-embed'
            t = document.createElement('div');
            t.style.position = 'relative';

            te = document.getElementById(containerId);
            te.appendChild(t);
            te.classList.add("tl-timeline-embed");

            if (width.toString().match("%")) {
                te.style.width = width.split("%")[0] + "%";
            } else {
                width = Number(width) - 2;
                te.style.width = (width) + 'px';
            }

            if (height.toString().match("%")) {
                te.style.height = height;
                te.classList.add("tl-timeline-full-embed");
            } else if (width.toString().match("%")) {
                te.classList.add("tl-timeline-full-embed");
                height = Number(height) - 16;
                te.style.height = (height) + 'px';
            } else {
                height = height - 16;
                te.style.height = (height) + 'px';
            }
        }

        /**
         * Parse all URL parameters as possible Timeline options.
         * Timeline itself will use or ignore these based on actual
         * supported options.
         */
        function optionsFromUrlParams() {
            var param_str = window.location.href.slice(window.location.href.indexOf('?') + 1);

            if (param_str.match('#')) {
                param_str = param_str.split('#')[0];
            }

            param_str = param_str.split('&');

            var url_vars = {}

            for (var i = 0; i < param_str.length; i++) {
                var uv = param_str[i].split('=');
                url_vars[uv[0]] = uv[1];
            }

            return url_vars;
        };

        ready(function() {
            setPageLanguage();
            var embed_path = computeEmbedPath();
            addOembedTag();

            var options = optionsFromUrlParams();
            createEmbedDiv('timeline-embed', options.width, options.height);
            // ga_property_id is not something we let users override
            options.ga_property_id = 'UA-27829802-4';
            if (typeof(options.source) == 'undefined') {
                options.source = '1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk' // women in computing
            }

            options.soundcite = true;

            window.options = options
            window.timeline = new TL.Timeline('timeline-embed', options.source, options)

        })
    </script>
</body>

</html>